<template>
    <div>
        <router-link :to='"/classmanager/classdetails/studentinformation?clazzId=" + this.$route.query.clazzId+"&clazzName="+this.$route.query.clazzName' class="navs">学生信息</router-link>
		<router-link :to='"/classmanager/classdetails/courseinformation?clazzId=" + this.$route.query.clazzId+"&clazzName="+this.$route.query.clazzName' class="navs">课程信息</router-link>
        <el-select class="select" v-model="url1" @change="To">
			<el-option 
				v-for="item in List" 
				:key="item.url" 
				:label="item.title"
				:value="item.url">
			</el-option>
		</el-select>
        <div class="btnBox">
            <el-button class="btn" type="primary" icon="el-icon-circle-plus-outline" @click="centerDialogVisible=true">添加科目</el-button>
            <el-button type="success" @click="update" v-show="showflag">删除</el-button>
            <el-button type="primary" @click="changeshow" v-show="!showflag">选择</el-button>
            <el-button type="primary" @click="changeshow" v-show="showflag">返回</el-button>
            <a href="#" @click="$router.push('/classmanager')" class="A">返回</a>
        </div>
        
       
        <el-dialog
            title="添加科目"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-checkbox-group v-model="checkedList">
                <el-checkbox :disabled="x.status==1" :label="x.subName" :value="x.subId"  v-for="(x,index) in newCourseList" :key="index">{{ x.subName }}</el-checkbox>       
            </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCourses">确 定</el-button>
        </span>
        </el-dialog>
        <el-row :gutter="20" class="smallbox">
            <el-col class="courseone" :span="6" v-for="(y, index) in coursesList" :key="index">
                <div class="grid-content bg-purple">{{ y.subName }}</div>
                <el-checkbox v-if="showflag" class="checkicon" @change="ID(y.subId)"></el-checkbox>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
		return{
            baseUrl: require("../js/baseUrl.js").baseUrl,
			List:[
				{
					url:"/classmanager/classdetails/courseinformation/timetable?clazzId=" + this.$route.query.clazzId+"&clazzName="+this.$route.query.clazzName,
					title:'课程表'
				},
				{
					url:"/classmanager/classdetails/courseinformation/classcourses?clazzId=" + this.$route.query.clazzId+"&clazzName="+this.$route.query.clazzName,
					title:'添加科目'
				}
			],
			url1:'',
            centerDialogVisible:false,
            courses:[],
            listsubId:[],
            coursesList:[],
            listid:[],
            reallistid:[],
            showflag: false,
            checkedList:[],
            realListsubId:[],
            newCourseList:[]
		}
	},
	methods:{
		To(){
			// console.log(this.url1);
			this.$router.push(this.url1).catch(error=> error)
		},
        //获取科目id:SchoolSys/sub/find
        getCou(){
            this.$http.post(this.baseUrl+'SchoolSys/sub/find',{

            }).then(res=>{
                // console.log(res.data.data);
                if(res.data.code==200){
                    this.courses=res.data.data
                    
                }
            })
            
        },
        getId(v){

            this.listsubId.push(v)
            const countMap = new Map();
            let realListsubId=[]
            this.listsubId.forEach(v=>{
                if(countMap.has(v)){
                countMap.set(v, countMap.get(v) + 1);
                }else{
                countMap.set(v, 1);
                }
            })
            countMap.forEach((count, num) => {
                if(count%2==0){
                
                }else{
                realListsubId.push(num)
                }
            });
            this.realListsubId=realListsubId
        },
        getSubId(){
            this.checkedList.forEach(v=>{
                this.courses.forEach(item=>{
                    if(v==item.subName){
                        this.realListsubId.push(item.subId)
                    }
                })
            })
        },
        //添加班级科目：SchoolSys/clazz/addclazzsub
        addCourses(){
            this.getSubId()
            //console.log("courses",this.courses)
            this.$http.post(this.baseUrl+'SchoolSys/clazz/selectclazzsub',{
                clazzId:Number(this.$route.query.clazzId) 
            }).then(res=>{
                if(res.data.code==200){
                    
                    var myData=res.data.data;
                    var arr=[];//未添加的
                    myData.forEach(v=>{
                        if(v.status!=1){
                            arr.push(v.subId)
                        }
                    })
                   var reallistid=this.realListsubId;
                    // var s1=new Set(reallistid)
                    // var s2=new Set(arr);
                //    var result=[...reallistid].filter(v=>s2.has(v))
                var result=[...reallistid].filter(v=>arr.includes(v))
                 
                    this.$http.post(this.baseUrl+'SchoolSys/clazz/addclazzsub',{
                        clazzId:Number(this.$route.query.clazzId),
                        listsubId:result
                    }).then(res=>{
                        if(res.data.code==200){
                            this.$message.success('科目添加成功')
                            this.realListsubId=[]
                            this.getCourses()
                        }else{
                            this.$message.error('科目添加失败')
                        }   
                    })
                    this.centerDialogVisible = false
                }
            })
            
        },
        //获取班级科目：SchoolSys/clazz/selectclazzsub
        getCourses(){
            this.$http.post(this.baseUrl+'SchoolSys/clazz/selectclazzsub',{
                clazzId:Number(this.$route.query.clazzId) 
            }).then(res=>{
                if(res.data.code==200){
                    this.newCourseList=res.data.data
                    this.coursesList=res.data.data.filter(v=>v.status==1)
                    let check=[]
                    res.data.data.filter(v=>v.status==1).map(v=>{
                        // console.log(v.subName);
                        check.push(v.subName)
                        this.checkedList=check
                    })
                    // console.log(this.checkedList);
                    let arr=this.checkedList;
                    let newArr=[]
                    arr.forEach(v=>{
                        newArr.push(v.subName)
                    })
                    // console.log(this.checkedList);
                }
            })
        },
        changeshow() {
            this.showflag = !this.showflag;
            this.subId=[];
        },
        //获取更改课程id
        ID(id){
            // this.listid.push(id)
            // console.log(this.listid);

            this.listid.push(id);
            const countMap = new Map();
            let realList=[]
            this.listid.forEach(v=>{
                if(countMap.has(v)){
                countMap.set(v, countMap.get(v) + 1);
                }else{
                countMap.set(v, 1);
                }
            })
            // console.log(countMap)
            countMap.forEach((count, num) => {
                if(count%2==0){
                
                }else{
                realList.push(num)
                }
            });
            this.reallistid=realList
        },
        //删除班级科目:SchoolSys/clazz/updatetclazzsub
        update(){
            if(this.reallistid==''){
                this.centerDialogVisible=false
            }else{
                this.$http.post(this.baseUrl+'SchoolSys/clazz/updatetclazzsub',{
                    clazzId:Number(this.$route.query.clazzId),
                    listsubId:this.reallistid
                }).then(res=>{
                    // console.log(res);
                    if(res.data.code==200){
                        this.getCourses()
                        this.$message.success('科目已删除')
                        this.centerDialogVisible=false
                        this.showflag = !this.showflag;
                        this.listid=[]
                    }else{
                        this.$message.error('科目删除失败')
                    }
                })
            }
        }
	},
    mounted(){
        this.getCou()
        this.getCourses()
    }
}
</script>

<style lang="less">
.A{
    margin-left: 30px;
}
    .coursesBox{
      
        div{
            display: inline-block;
            margin: 10px 0;
            text-align: center;
            width: 25%;
            span{
                margin-left: 10px;
            }
        }
    }     
    .btn{
        margin-left: 30px;
    }
    .smallbox {
        width: 95%;
        height: 100%;
        margin-top: 30px !important;
        text-align: center;

        .courseone {
            position: relative;

            div {
            height: 250px;
            line-height: 250px;
            border: 1px solid #000;
            margin: 10px 0px;
            }

            .checkicon {
            position: absolute;
                top: 0;
                right: 0;
            }

        }
    }
</style>